import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { BarWrapper } from './style'
import { useAppSelector } from '@/store'
import { useEffect } from 'react'
import { fetchLyricAction, fetchPlayerDetailAction } from '../../store/player'
import { useAppDispatch } from '@/store'
import { APlayer } from 'aplayer-react'
import 'aplayer-react/dist/index.css'

interface IProps {
  children?: ReactNode
}

const PlayerBar: React.FC<IProps> = () => {
  const dispatch = useAppDispatch()
  useEffect(() => {
    dispatch(fetchPlayerDetailAction({ ids: currentSongId }))
    dispatch(fetchLyricAction({ id: currentSongId }))
  }, [])
  const {playerDetail,lyric,currentSongId} = useAppSelector((state) => ({
     playerDetail: state.player.playerDetail,
     lyric: state.player.lyric,
     currentSongId: state.player.currentSongId
  }))

  return (
    <BarWrapper>
      <APlayer
        audio={{
          name: playerDetail?.name || '未知歌曲',
          artist: playerDetail?.ar[0].name || '未知歌手',
          cover: playerDetail?.al.picUrl || '',
          url: `https://music.163.com/song/media/outer/url?id=${playerDetail?.id}`,
          lrc: lyric?.lyric
        }}
        autoPlay={false}
        theme="auto"
      />
    </BarWrapper>
  )
}

export default memo(PlayerBar)
